<template>
    <svg :id="'id'+val+'-'+ci" >
    </svg>
</template>
<script>
export default {
    name:'cycle',
    props:["val","ci"],
    created(){
         this.value = this.$props.val
         this.print()
         console.log(this.$props.val)
    },
    watch:{
        val:function(newval){
             this.value =newval
             this.print()
        }
    },
    data(){
        return {
            value:'1',
            fillb:{  // 英式
                "": [0,0,0,0,0,0,0,0,0,0],
                "1":[1,1,1,1,1,1,1,1,1,1],// 1
                "2":[1,1,1,1,1,1,1,1,0,0],// 2
                "3":[1,1,1,1,1,1,0,0,0,0],// 3
                "4":[1,1,1,1,1,0,1,1,1,1],// 4
                "5":[1,1,1,1,0,0,0,0,0,0],// 5
                "6":[1,1,1,0,0,0,0,0,0,0],// 6
                "7":[1,1,0,0,0,0,0,0,0,0],// 7
                "A":[1,0,1,0,0,0,0,0,0,0],// A
                "B":[],// B
                "C":[],// C
                "D":[],// D
            },
            randid:""
        }
    },
    methods:{
        fillcolor(index){
            return this.fillb[this.value][index]==1?"black":"transparent";
        },
        print(){
            var width = 46;
            var height = 340;
            var v = this.value
            this.$d3.select("#id"+v+'-'+this.$props.ci).html("")
            var svg = this.$d3.select("#id"+v+'-'+this.$props.ci).attr("width",width).attr("height",height).attr("padding","1px").style("border","1px");
            svg.append("circle").attr("cx","21px").attr("cy","10px").attr("r","10px").attr("fill",this.fillcolor(0)).attr("stroke-width","1px").attr("stroke","black");    // 0孔
            svg.append("line").attr("x1","").attr("y1","25px").attr("x2","40px").attr("y2","25px").attr("stroke","black");
            svg.append("circle").attr("cx","21px").attr("cy","40px").attr("r","10px").attr("fill",this.fillcolor(1)).attr("stroke-width","1px").attr("stroke","black"); // 1
            svg.append("circle").attr("cx","21px").attr("cy","70px").attr("r","10px").attr("fill",this.fillcolor(2)).attr("stroke-width","1px").attr("stroke","black"); // 2
            svg.append("circle").attr("cx","21px").attr("cy","100px").attr("r","10px").attr("fill",this.fillcolor(3)).attr("stroke-width","1px").attr("stroke","black");// 3

            svg.append("line").attr("x1","").attr("y1","115px").attr("x2","40px").attr("y2","115px").attr("stroke","black");
            svg.append("circle").attr("cx","21px").attr("cy","130px").attr("r","10px").attr("fill",this.fillcolor(4)).attr("stroke-width","1px").attr("stroke","black");// 4
            svg.append("circle").attr("cx","21px").attr("cy","160px").attr("r","10px").attr("fill",this.fillcolor(5)).attr("stroke-width","1px").attr("stroke","black"); // 5

            svg.append("circle").attr("cx","21px").attr("cy","200px").attr("r","20px").attr("fill","transparent").attr("stroke-width","1px").attr("stroke","black");

            svg.append("circle").attr("cx","12px").attr("cy","200px").attr("r","10px").attr("fill",this.fillcolor(6)).attr("stroke-width","1px").attr("stroke","black");//6
            svg.append("circle").attr("cx","30px").attr("cy","200px").attr("r","8px").attr("fill",this.fillcolor(7)).attr("stroke-width","1px").attr("stroke","black");//7

            svg.append("line").attr("x1","").attr("y1","225px").attr("x2","40px").attr("y2","225px").attr("stroke","black");

            svg.append("circle").attr("cx","21px").attr("cy","250px").attr("r","20px").attr("fill","transparent").attr("stroke-width","1px").attr("stroke","black");

            svg.append("circle").attr("cx","12px").attr("cy","250px").attr("r","10px").attr("fill",this.fillcolor(8)).attr("stroke-width","1px").attr("stroke","black");// 8
            svg.append("circle").attr("cx","30px").attr("cy","250px").attr("r","8px").attr("fill",this.fillcolor(9)).attr("stroke-width","1px").attr("stroke","black");// 9

            svg.append("text").attr("x","20").attr("y","300").text(this.value).attr("fill","blue");
        },
        rand(){
            return Math.random().toString(36).substring(2);
        }
    },
    mounted(){
        this.print()
    }
}
</script>
<style>
</style>